<div class="panel panel-default panel-intro">
    <style>
        #toolbar .dropdown.btn-group:nth-of-type(2) {
            display: none;
        }
        
        /* 过期事件样式 */
        .expired-event {
            opacity: 0.7;
        }
        
        .expired-event td {
            color: #6c757d !important;
        }
        
        /* 禁用按钮样式 */
        .btn-disabled {
            opacity: 0.5;
            cursor: not-allowed !important;
            pointer-events: none;
        }
        
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            color: #fff;
        }
    </style>
    <!-- 功能板块操作提示栏 -->
    <div class="school-guide-panel"
        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
        <div class="panel-header"
            style="padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: center;">
            <h4 style="margin: 0; font-weight: 600;"><i class="fa fa-calendar-check-o"></i> 学校项目管理模块操作指引</h4>
            <button class="btn btn-sm" id="toggleGuide"
                style="background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 5px 10px;">
                <i class="fa fa-chevron-down"></i> 展开
            </button>
        </div>
        <div class="guide-content" id="guideContent" style="padding: 20px; display: none;">
            <!-- 当前步骤信息 -->
            <div class="current-step-info"
                style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; margin-bottom: 20px;">
                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                    <span class="step-badge"
                        style="background: #28a745; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-right: 10px;">当前步骤</span>
                    <h5 style="margin: 0; font-weight: 600;">第2步：项目排课管理</h5>
                </div>
                <p style="margin: 0; opacity: 0.9;">请在此页面查看项目排课，以及调整排课，正式排课。</p>
            </div>

            <!-- 进度条 -->
            <div class="progress-container" style="margin-bottom: 20px;">
                <div class="progress"
                    style="height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden;">
                    <div class="progress-bar"
                        style="width: 58.33%; background: #28a745; height: 100%; transition: width 0.3s ease;"></div>
                </div>
                <div
                    style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; opacity: 0.8;">
                    <spann id="step">步骤 7/12</span>
                        <span id="rait">58.33% 完成</span>
                </div>
            </div>

            <!-- 操作步骤列表 -->
            <div class="steps-list"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;">
                <div class="step-item active"
                    style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; border-left: 4px solid #28a745;">
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <span class="step-number"
                            style="background: #28a745; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; margin-right: 10px;">2.4</span>
                        <strong>项目排课管理</strong>
                        <span class="current-badge"
                            style="background: #ffc107; color: #000; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-left: 10px;">当前</span>
                    </div>
                    <p style="margin: 0 0 10px 34px; font-size: 13px; opacity: 0.9;">查看项目排课，以及调整排课，正式排课</p>
                    <button class="btn btn-sm btn-success"
                        onclick="window.top.location.href='/applyform/apply?ref=addtabs'"
                        style="margin-left: 34px; padding: 4px 12px; font-size: 12px;">如果已完善，点击到下一步</button>
                </div>
            </div>
        </div>
    </div>

    {:build_heading()}

    <div class="panel-body">
        <!-- 选项卡导航 -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#course-events" aria-controls="course-events" role="tab" data-toggle="tab">
                    <i class="fa fa-calendar"></i> 学校课程事件表
                </a>
            </li>
            <li role="presentation">
                <a href="#schedule-table" aria-controls="schedule-table" role="tab" data-toggle="tab">
                    <i class="fa fa-table"></i> 学校排课表
                </a>
            </li>
        </ul>

        <!-- 选项卡内容 -->
        <div class="tab-content" style="margin-top: 15px;">
            <!-- 课程事件表选项卡 -->
            <div role="tabpanel" class="tab-pane fade active in" id="course-events">
                <!-- 添加排课事件状态说明 -->
                <div class="alert alert-info" style="margin-bottom: 15px;">
                    <i class="fa fa-info-circle"></i> 
                    <strong>排课事件状态说明：</strong>
                    系统会自动根据时间字段判断排课记录的过期状态。过期的排课记录将以红色边框标识，可以点击查看详情但无法修改。删除按钮对过期事件完全禁用。
                </div>
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                class="fa fa-refresh"></i> </a>
                        <a href="javascript:;"
                            class="btn btn-success btn-add {:$auth->check('coursetable/autoplan/add')?'':'hide'}"
                            title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;"
                            class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('coursetable/autoplan/edit')?'':'hide'}"
                            title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;"
                            class="btn btn-danger btn-del btn-disabled {:$auth->check('coursetable/autoplan/del')?'':'hide'}"
                            title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;"
                            class="btn btn-info btn-redo {:$auth->check('coursetable/autoplan/redo')?'':'hide'}"
                            title="重排"><i class="fa fa-refresh"></i> 重排</a>
                        <a href="javascript:;"
                            class="btn btn-danger btn-export {:$auth->check('coursetable/autoplan/export')?'':'hide'}"
                            title="{:__('Export')}"><i class="fa fa-download"></i> 导出</a>

                        <!-- 项目列表下拉框 -->
                        <div class="dropdown btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-filter"></i> 选择项目 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu project-list" role="menu">
                                <li><a href="javascript:;" data-id="0">全部项目</a></li>
                                {foreach name="tableList" item="item"}
                                <li><a href="javascript:;" data-id="{$item.id}">{$item.project_name}</a></li>
                                {/foreach}
                            </ul>
                        </div>

                        <!-- 清空项目排期按钮 -->
                        <a href="javascript:;" class="btn btn-danger btn-clear-schedule " title="清空项目排期"><i
                                class="fa fa-trash-o"></i> 清空项目排期</a>

                        <!-- 正式排课按钮 -->
                        <a href="javascript:;" class="btn btn-success btn-confirm-schedule"
                            data-action="confirm-schedule" data-table-id="0" title="正式排课">
                            <i class="fa fa-check"></i> 正式排课
                        </a>

                        <!-- 取消正式排课按钮 -->
                        <a href="javascript:;" class="btn btn-warning btn-cancel-schedule" data-action="cancel-schedule"
                            data-table-id="0" title="取消正式排课">
                            <i class="fa fa-times"></i> 取消正式排课
                        </a>

                        <div class="dropdown btn-group {:$auth->check('coursetable/autoplan/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled"
                                data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                        data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a>
                                </li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                        data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to
                                        hidden')}</a></li>
                            </ul>
                        </div>
                        <div class="row cityschool">
                            <div class="col-md-3">
                                <select id="c-cityarea_id" name="city_id" class="form-control select"
                                    data-live-search="true" title="选择城市">
                                    <option value="">全部城市</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select id="c-school_id" name="school_id" class="form-control select"
                                    data-live-search="true" title="选择学校">
                                    <option value="">全部学校</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-info btn-filter" id="btn-filter">
                                    <i class="fa fa-search"></i> 筛选
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <table id="table" class="table table-striped table-bordered table-hover"
                    data-operate-edit="{:$auth->check('coursetable/autoplan/edit')}"
                    data-operate-del="{:$auth->check('coursetable/autoplan/del')}" width="100%">
                </table>
            </div>

            <!-- 排课表选项卡 -->
            <div role="tabpanel" class="tab-pane fade" id="schedule-table">
                <div class="widget-body no-padding">
                    <div class="alert alert-info">
                        <i class="fa fa-info-circle"></i> 这里显示排课表的可视化视图
                    </div>
                    <div id="message"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Sticky table header */
    .fixed-table-container {
        position: relative;
    }

    .fixed-table-container thead th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 100;
    }

    .bootstrap-table .fixed-table-container {
        overflow: visible !important;
    }

    /* 隐藏表格右侧的操作按钮列 */
    .columns {
        display: none !important;
    }
    
    /* 城市和学校选择框样式 */
    #c-cityarea_id,
    #c-school_id {
        color: #055705 !important;
        background-color: #fff !important;
        border: 1px solid #B0E0E6 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    #c-cityarea_id:focus,
    #c-school_id:focus {
        color: #055705 !important;
        background-color: #fff !important;
        border-color: #87CEEB !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 5px rgba(135, 206, 235, 0.3) !important;
    }
</style>

<!-- 引入密码验证脚本 -->
<script src="/assets/js/schedule-password.js"></script>